<!--
 * 菜单管理--新增编辑菜单
 * @author: hexiaozhen
 * @since: 2023-09-27
 * addEditMenu.vue
-->
<template>
  <component
    :is="$route.name === 'AddEditMenu' ? 'div' : 'a-modal'"
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增菜单' : '编辑菜单'"
    title-align="start"
    width="750px"
    @cancel="handleCancel"
    draggable
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :formItems="formItems"
      :formData="formData"
      :rowspan="12"
      class="tableForm"
      @formChange="formChange"
      @search="search"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </component>
</template>

<script setup>
import { reactive, ref, onMounted, computed, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import { rule, initFormData, formItem } from './data/addEditMenu'
import system from '@/api/modules/system'
import { Message } from '@arco-design/web-vue'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const formAndTableRef = ref() // 表单
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addMenu' : 'editMenu'
      system[api]({ ...formData }).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 表单配置
let formItems = reactive(JSON.parse(JSON.stringify(formItem)))

let formData = {}
if (rowData.value.type === 'edit') {
  formData = reactive({ ...initFormData, ...rowData.value })
  delete formData.type
} else {
  formData = reactive({ ...initFormData })
  formData.parentId = rowData.value.menuId
}
const rules = reactive(rule)
// 表单change联动
const formChange = (prop, val) => {
  // 菜单类型
  if (prop === 'menuType') {
    switch (val) {
      case 'M': {
        // 目录
        formItems[indexProp.value['customIcon']].hide = false // 菜单图标
        formItems[indexProp.value['isFrame']].hide = false // 是否外链
        formItems[indexProp.value['path']].hide = false // 路由地址
        formItems[indexProp.value['visible']].hide = false // 显示状态
        formItems[indexProp.value['status']].hide = false // 菜单状态
        formItems[indexProp.value['component']].hide = true //路由地址
        formItems[indexProp.value['perms']].hide = true // 权限标识
        formItems[indexProp.value['isCache']].hide = true // 是否缓存
        break
      }
      case 'C': {
        // 菜单
        formItems[indexProp.value['customIcon']].hide = false // 菜单图标
        formItems[indexProp.value['isFrame']].hide = false // 是否外链
        formItems[indexProp.value['path']].hide = false // 路由地址
        formItems[indexProp.value['visible']].hide = false // 显示状态
        formItems[indexProp.value['status']].hide = false // 菜单状态
        formItems[indexProp.value['component']].hide = false //路由地址
        formItems[indexProp.value['perms']].hide = false // 权限标识
        formItems[indexProp.value['isCache']].hide = false // 是否缓存
        break
      }
      case 'F': {
        // 按钮
        formItems[indexProp.value['customIcon']].hide = true // 菜单图标
        formItems[indexProp.value['isFrame']].hide = true // 是否外链
        formItems[indexProp.value['path']].hide = true // 路由地址
        formItems[indexProp.value['visible']].hide = true // 显示状态
        formItems[indexProp.value['status']].hide = true // 菜单状态
        formItems[indexProp.value['component']].hide = true //路由地址
        formItems[indexProp.value['perms']].hide = false // 权限标识
        formItems[indexProp.value['isCache']].hide = true // 是否缓存
        break
      }
    }
  }
}
const indexProp = computed(() => {
  const indexObj = {}
  formItems.forEach((item, index) => {
    indexObj[item.name] = index
  })
  return indexObj
})
//  数据字典
const getOption = () => {
  const param = { dictTypes: 'sys_menu_type,sys_normal_disable' }
  system.getDicts(param).then((res) => {
    // 菜单类型
    formItems[indexProp.value['menuType']].options = res.data.sys_menu_type.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
    // 菜单状态
    formItems[indexProp.value['status']].options = res.data.sys_normal_disable.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
}
// 获取表格数据
const getTableList = (val = '') => {
  const param = { menuName: val }
  system.getMenuList(param).then((res) => {
    formItems[indexProp.value['parentId']].data = res.data
  })
}
const search = (val) => {
  getTableList(val)
}
onMounted(() => {
  getOption()
  getTableList()

  if (rowData.value.type === 'edit') {
    formChange('menuType', rowData.value.menuType)
  }
})
</script>
